{% extends 'lib/_base.html' %}
{% load static %}


{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock %}

{% block wrapper_content %}
    <div class="login-nav fix">
        <ul class="f-r">
            <li><a href="#">首页</a></li>
            <li><a href="#">说明</a></li>
        </ul>
    </div>
    <div class="login-banner"></div>
    <div class="login-box">
        <div id="login" class="show ">
            <div class="box-con tran">
                <div class="login-con f-l">
                    <form action="{% url 'zhongbao_admin:login' %}" method="post">{% csrf_token %}
                        <div class="form-group">
                            <input type="text" name="username" placeholder="用户名/手机号码"/>
                        </div>
                        <div class="form-group">
                            <input type="password" name="password" placeholder="密码"></div>
                        <div class="form-group">
                            <button type="submit" class="tran pr" id="login-btn">
                                <span  class="tran">登录</span>
                                <img id="login-loading-img" class="loading" src="{% static 'public/img/loading.gif' %}" style="display:none">
                            </button>
                        </div>
                    </form>
                    <div class="from-line"></div>
                    <div class="form-group">
                        <a href="javascript:;" class="move-signup a-tag tran blue-border">还没有帐号？免费注册<i
                                class="fa fa-arrow-circle-right"></i></a>
                    </div>
                    <div class="form-group">
                        <a href="javascript:;" class="move-reset a-tag tran">忘记密码？重置 <i
                                class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            </div>
        </div>

        {#    注册#}
        <div id ="signup" class="hidden">
            <div class="signup f-l ">
                <div class="form-group">
                    <div class="signup-form">

                        <input type="text" placeholder="手机号码" class="email-mobile" onblur="verify.verifyMobile(this)"
                               id="mobile-verify-input">
                        {#                        <a href="javascript:;" class="signup-select">邮箱注册</a>#}
                    </div>
                    <span class="error-notic">手机号码格式不正确</span>
                </div>
                <div class="signup-tel form-group" style="">
                    <div class="signup-form" id="message-inf" style="display:none">
                        <input type="text" placeholder="短信验证码" style="width:180px;" onblur="verify.VerifyCount(this)"
                               id="register_verify_code">
                        <a href="javascript:;" class="reacquire" id="count-down-a">重新获取（<span
                                id="verify-count-down">60</span>）</a>
                        <a href="javascript:;" class="reacquire" id="reset-verify-a"
                           style="color: #00b3ee; display: none; margin-left: 25px;">&nbsp;&nbsp;&nbsp;重新获取</a>
                        <span class="error-notic">验证码输入错误</span>
                    </div>
                    <div class="form-group">
                        <button class="tran get-message pr" id="get_verify_btn_register">
                            <a href="javascript:;" class="tran" id="get-message">获取短信验证码</a>
                            <img class="loading" src="{% static 'public/img/loading.gif' %}">
                        </button>

                        <button class="tran pr move-addinf" id="verify_btn_register_next" style="display: none">
                            <a href="javascript:;">下一步</a>
                        </button>
                    </div>
                </div><!-- 手机号码注册 -->

                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-login a-tag tran blue-border">已有帐号？登录<i
                            class="fa fa-arrow-circle-right">
                    </i></a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-reset a-tag tran">忘记密码？重置 <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
{#        还是注册#}
        <div class="f-l hidden" id="mobile-success">
            <form action="{% url 'zhongbao_admin:register' %}" method="POST">{% csrf_token %}
                <p style="text-align:center">手机号 <span id="mobile_display_span">186****7580</span> 验证成功</p>
                <p style="text-align:center">请完善您的账号信息，完成注册</p>
                 <input name="mobile" type="text" id="mobile" style="display: none"/>
                <div class="form-group">
                    <input name="email" type="text" placeholder="邮箱" class="email-mobile"
                           onblur="verify.verifyEmail(this)"/>
                    <span class="error-notic">邮箱格式不正确</span>
                </div>
                <div class="form-group">
                    <input type="text" name="username" placeholder="用户名" onblur="verify.UsernameVerify(this)">
                    <span class="error-notic">用户名必须以字母或数字开头，且只能包含数字、字母和@+-符号</span>
                </div>
                <div class="form-group">
                    <input type="text" name="agency" placeholder="所属机构名" >
                </div>
                <div class="form-group">
                    <input id="register_p1" name="password" type="password" placeholder="密码（字母、数字，至少6位）"
                           onblur="verify.PasswordLenght(this)"/>
                    <span class="error-notic">必须为6位以上字母加数字</span>
                </div>
                <div class="form-group">
                    <input type="password" name="password1" placeholder="请再一次输入密码" onblur="verify.PasswordAccordance1(this)"/>
                    <span class="error-notic">两次输入的密码不一致</span>
                </div>
               <div class="form-group">
                    <button type="button" class="tran pr">
                        <span  class="tran">注册</span>
                        <img class="loading" src="images/loading.gif">
                    </button>
                </div>
                <p class="view-clause">点击注册，即同意我们的 <a href="{% url 'zhongbao_admin:terms' %}">用户隐私条款</a></p>
            </form>
        </div>

        <input type="hidden" name="u" id="u" value=""/>
{#    修改密码#}
        <div id ="mimachongzhi" class="hidden">
            <div class=" f-l ">
                <div class="form-group send-email">
                        <div class="form-group">
                            <input name="email" type="text" placeholder="请输入您的邮箱地址" id="email-address" onblur="verify.verifyEmail(this)">
                            <span class="error-notic">&nbsp;&nbsp;&nbsp;邮箱格式不正确</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="tran pr" id="send-reset-code" >
                                <span  class="tran">发送重置密码邮件</span>
                            </button>
                        </div>
                </div>
                <div class="email-verify" style="display: none">
                    <form action="{% url 'zhongbao_admin:reset' %}" method="POST">{% csrf_token %}
                        <div class="form-group">
                            <input type="hidden" id="reset-count" name="user-email" >
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="邮件验证码" style="width:180px;"
                                   id="reset_verify_code" onblur="verify.VerifyEmailCount(this)">
                            <span class="error-notic">验证码输入错误</span>
                        </div>
                        <div class="form-group">
                        <input id="register_p1_reset" name="password" type="password" placeholder="密码（字母、数字，至少6位）"
                               onblur="verify.PasswordLenght(this)"/>
                        <span class="error-notic">&nbsp;&nbsp;&nbsp;必须为6位以上字母加数字</span>
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="请再一次输入密码" onblur="verify.PasswordAccordance(this)"/>
                            <span class="error-notic">&nbsp;&nbsp;&nbsp;两次输入的密码不一致</span>
                        </div>
                        <button type="button" class="tran pr" id="verify-reset-code" >
                            <span  class="tran">确认修改</span>
                            <img class="loading" src="images/loading.gif">
                        </button>
                    </form>
                </div>

                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-signup	a-tag tran blue-border">还没有帐号？免费注册<i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-login a-tag tran">已有帐号？登录<i class="fa fa-arrow-circle-right">
                    </i></a>
                </div>
            </div>
        </div>


    </div>

    <div class="login-footer">
        地址：北京市海淀区北四环西路56号辉煌时代大厦15层    联系电话：400-052-1288<br>
        Copyright&nbsp;&nbsp;&copy;&nbsp;&nbsp;2012-2020&nbsp;&nbsp;istarshine.com.All&nbsp;&nbsp;rights&nbsp;&nbsp;reserved<br>
        <a>隐私保护</a>　北京智慧星光信息技术有限公司　<a >版权所有</a>　<a href="https://beian.miit.gov.cn/" target="_blank">ICP备12009876号-1</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802008588" target="_blank">京公网安备11010802008588号</a>
    </div>
{% endblock %}

{% block body_tail %}
    <script>
         $('#login').attr('class','show')
         $('#mimachongzhi').attr('class','hidden')
         $('#signup').attr('class','hidden')
         $('#mobile-success').attr('class','hidden')

        function getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r!=null) return unescape(r[2]); return null; //返回参数值
        }
        $("#u").val(getUrlParam(u));
        var _handle = false;//储存电话是否填写正确
        var _handlebt = false;
        var mobile_verify_input = $('#mobile-verify-input');//手机验证字段
        var mobile_validateReg = /^((\+?86)|(\(\+86\)))?1\d{10}$/;
        var reset_timer = null;

        var register_verify_code = $('#register_verify_code');

        // 60秒倒计时
        var get_verify_btn_register = $('#get_verify_btn_register');
        var verify_btn_register_next = $('#verify_btn_register_next');
        var verify_count_down = $('#verify-count-down');
        var reset_verify_a = $('#reset-verify-a');
        var count_down_a = $('#count-down-a');

        function clear_verify_data() {
            mobile_verify_input.val('');
            clearInterval(reset_timer);
            verify_count_down.text('60');
            get_verify_btn_register.fadeIn(100);
            verify_btn_register_next.fadeOut(100);
            $("#message-inf").fadeOut(100);
        }

        $(".signup-form input").on("focus", function () {
            $(this).parent().addClass("border");
        });
        $(".signup-form input").on("blur", function () {
            $(this).parent().removeClass("border");
        })

        //表单验证
        function showNotic(_this, focus) {
            $(_this).parents(".form-group").find(".error-notic").fadeIn(100);
            if (focus) {
                $(_this).focus();
            }
        }//错误提示显示
        function hideNotic(_this) {
            $(_this).parents(".form-group").find(".error-notic").fadeOut(100);
        }//错误提示隐藏

        function code_verify(verify_id) {
            var _value = $(verify_id).val();
            $.ajaxSetup({
                        data:{
                            csrfmiddlewaretoken:'{{ csrf_token }}',
                            verify: _value
                        }
                    });
                    $.post(
                        "{% url 'zhongbao_admin:send_verify' %}",
                        function(response){
                            if (response != 1){
                                showNotic(verify_id);
                                _handle = false;


                            }
                            else {
                                hideNotic(verify_id);
                                _handle = true;
                            }

                        }
                    );


        }//验证验证码



        verify_btn_register_next.click(function () {
            var _boxCon = $(".box-con");
            code_verify('#register_verify_code')
            var mobile_org = mobile_verify_input.val();
            $('#mobile_display_span').text(mobile_org.slice(0, 3) + "****" + mobile_org.slice(7, 11));
            $('#mobile').val(mobile_org)
             if (_handle) {
                 $('#mobile-success').attr('class','show')
                 $('#signup').attr('class','hidden')
             }
        });

        var verify = {
            verifyEmail: function (_this) {
                var validateReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                var _value = $(_this).val();
                if (!validateReg.test(_value)) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
            },//验证邮箱
            verifyMobile: function (_this) {
                var _value = $(_this).val();
                if (!mobile_validateReg.test(_value)) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
                return _handle
            },//验证手机号码
            UsernameVerify: function (_this) {
                var _value = $(_this).val();
                var data = username_verify($(_this));
                if (!data.tag) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
                return _handle
            },//验证用户名
            PasswordLenght: function (_this) {
                var _val = $(_this).val();
                var verify_data = password_test($(_this));
                if (!verify_data.tag) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
            },//验证设置密码长度
            PasswordAccordance: function (_this) {
                var _val = $(_this).val();
                if($('#register_p1_reset').val()){
                    var password1 = $('#register_p1_reset').val();
                } else {
                    alert('请输入密码！')
                }
                if (_val != password1) {
                    showNotic(_this);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                    if(_handlebt === true){
                         $('button').attr('type','submit')
                    }
                }
            },//验证修改密码是否一致
            PasswordAccordance1: function (_this) {
                var _val = $(_this).val();
                if($('#register_p1').val()){
                    password1 = $('#register_p1').val();
                } else {
                    alert("请输入密码！")
                }
                if (_val != password1) {
                    showNotic(_this);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                     $('button').attr('type','submit')
                }
            },//验证密码是否一致
            VerifyCount: function (_this) {
                var _value = $(_this).val();
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        verify: _value
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:send_verify' %}",
                    function(response){
                        if (response == 1){
                            hideNotic(_this);
                            _handle = true;
                        }
                        else {
                            showNotic(_this);
                            _handle = false;
                        }
                    }
                );

            },//验证手机验证码
            VerifyEmailCount: function (_this) {
                var _value = $(_this).val();
                hideNotic(_this);
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        verify: _value
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:verify_email' %}",
                    function(response){
                        if (response == 1){

                            hideNotic(_this);
                            _handle = true;
                            _handlebt = true
                        }
                        else {
                            showNotic(_this);
                            _handle = false;
                        }
                    }
                );
            }//验证邮箱验证码

        };

        //获取短信验证码
        $("#get-message").click(function () {
            if (_handle) {
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        mobile: $('.email-mobile').val()
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:send_message' %}",
                    function(response){
                        if (response.Code=='OK'){
                            resetTime(60);
                            $("#message-inf").fadeIn(100);
                            verify_btn_register_next.fadeIn(100);
                            get_verify_btn_register.fadeOut(100);
                        }
                        else {
                            console.log(response)
                            alert(response.Code)
                        }
                    }
                );
            } else {
                alert('请填写正确的手机号！');
            }
        });

        // 60秒倒计时
        function resetTime(time) {
            var t = time;
            var s = time;

            function countDown() {
                s--;
                s < 10 && (s = '0' + s);
                verify_count_down.text(s);
                if (s == 0) {
                    clearInterval(reset_timer);
                    verify_count_down.text('60');
                    count_down_a.fadeOut(100);
                    reset_verify_a.fadeIn(100);
                }
            }

            reset_timer = setInterval(countDown, 1000);
        }
        reset_verify_a.click(function () {
            $.ajaxSetup({
                data:{
                    csrfmiddlewaretoken:'{{ csrf_token }}',
                    mobile: $('.email-mobile').val()
                }
            });
            $.post(
                "{% url 'zhongbao_admin:send_message' %}",
                function(response){
                    if (response.Code=='OK'){
                        resetTime(60);
                        reset_verify_a.fadeOut(100);
                        count_down_a.fadeIn(100);
                    }

                }
            );

        });
        $('#login-btn').click(function () {
            $('#login-loading-img').css('display', 'block');
        });


        $('#send-reset-code').click(function(){
            $('#reset-count').attr('value',$('#email-address').val()) ;
            if (_handle) {
                var email = $('#email-address').val();
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        email: email
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:send_email' %}",
                    function(response){
                        if (response==1){
                            alert('发送成功！请前往邮箱查收验证码。');
                            resetTime(60);
                            $('.send-email').fadeOut(100);
                            $('.email-verify').fadeIn(100);
                        }else if(response==2) {
                            alert('该邮箱不存在！');
                        }
                        else {
                            alert(response)
                        }
                    }
                );

            } else {
                alert('请填写正确的邮箱！');
            }
        });

        {#密码校验#}
        function password_strength_test(password_ele, password_class, text) {
            password_ele.addClass(password_class);
            password_ele.text(text);
        }


        function password_test(password_input) {
            var text = '';
            var tag = true;
            var text_class = '';
            var verystrongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", 'g');
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).*$", 'g');
            var mediumRegex = new RegExp("^(?=.{6,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$");
            var enoughRegex = new RegExp("(?=.{6,}).*");
            if (password_input.val().length > 0) {
                if (false == enoughRegex.test(password_input.val())) {
                    text_class = 'error';
                    text = '请确认您的密码长度在6到16位之间';
                    tag = false;
                }
                else if (verystrongRegex.test(password_input.val())) {
                    text_class = 'success';
                    text = '很强';
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
                } else if (strongRegex.test(password_input.val())) {
                    text_class = 'success';
                    text = '强';
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
                }
                else if (mediumRegex.test(password_input.val())) {
                    text_class = 'common';
                    text = '一般';
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
                }
                else {
                    text_class = 'error';
                    text = '弱,必须为6位以上字母加数字';
                    tag = false;
                    //如果密码为6位及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
                }
                return {'tag': tag, 'text': text, 'text_class': text_class};
            }
        };

        // 用户名验证
        var right_name = new RegExp("^[\\w][\\w@+-]+$");

        function username_verify(username) {
            var tag = true;
            var text = '';
            if (username.val().length == 0) {
                text = '用户名不能为空';
                tag = false;
            } else if (false == right_name.test(username.val())) {
                tag = false;
            } else {
                // username_test.attr('class', 'create_element_class success');
                //duplicate_username()
            }
            return {'tag': tag, 'text': text}
        };

        $('.move-signup').click(function () {
            $('#login').attr('class','hidden')
            $('#mimachongzhi').attr('class','hidden')
            $('#signup').attr('class','show')
            $('#mobile-success').attr('class','hidden')
        });
        $('.move-login').click(function () {
            $('#login').attr('class','show')
            $('#mimachongzhi').attr('class','hidden')
            $('#signup').attr('class','hidden')
            $('#mobile-success').attr('class','hidden')
        });

        $('.move-reset').click(function () {
                $('#login').attr('class','hidden')
                $('#mimachongzhi').attr('class','show')
                $('#signup').attr('class','hidden')
                $('#mobile-success').attr('class','hidden')
            })
    </script>
{% endblock body_tail %}

